<template>
  <div class="app-container">
    <el-card class="headMenu">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="">一级菜单</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">二级菜单</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">三级菜单</a></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="main">

      <el-form label-width="120px">
        <el-row class="selectionBox">
          <el-form-item label="店铺名称:">
            <el-input size="small" style="width: 180px" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="用户名称:">
            <el-select size="small" style="width: 180px">
              <el-option />
            </el-select>
          </el-form-item>
          <el-form-item label="状态:">
            <el-input size="small" style="width: 180px" />
          </el-form-item>
        </el-row>
        <el-row class="operationButton">

          <el-form-item label="提现单号:">
            <el-input size="small" style="width: 180px" placeholder="请输入" />
          </el-form-item>

          <el-form-item label="日期:">
            <el-input size="small" style="width: 180px" placeholder="请输入" />
          </el-form-item>

          <el-col class="btn">
            <el-button type="primary" size="small">查询</el-button>
            <el-button size="small">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        type="primary"
        size="small"
        class="addButton"
        @click="showPopup=true"
      >+ 新建</el-button>

      <el-table
        :data="tableData"
        :header-cell-style="{background:'#FAFAFA',color:'#262626'}"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="type"
          label="交易类型"
          width="120px"
        />
        <el-table-column
          prop="shop_name"
          label="店铺名/用户名"

          width="150px"
        />
        <el-table-column
          prop="order_number"
          label="单号"
          width="150px"
        />
        <el-table-column
          prop="amount"
          label="状态"
          width="150px"
        />
        <el-table-column
          prop="time"
          label="申请时间"
          width="180px"
        />
        <el-table-column
          prop="remarks"
          label="备注"
          width="180px"
        />
        <el-table-column
          prop="refund_rate"
          label="确认退款率"
          width="180px"
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="160px"
        >
          <template>
            <el-button type="text" size="medium" @click="showPopup=true">编辑</el-button>
            <el-button type="text" size="medium">删除</el-button>
            <el-button type="text" size="medium" @click=" showConfirmOrder=true">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page_number">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          background
          layout="total,prev, pager, next, sizes, jumper"
          :total="40"
        />
      </el-row>

    </el-card>
    <coupon-popup :show-popup.sync="showPopup" />
    <el-dialog title="确认订单" :visible="showConfirmOrder" :before-close="btnCancel">
      <div class="tips" :class="{hideBox:ishideBox}">
        <i class="el-icon-info" />
        确认这笔单号吗？它将会记录被加入到账户中去
        <div class="close" @click="ishideBox=true">✕</div>
      </div>
      <el-row class="explain">备注说明:</el-row>
      <el-input type="textarea" :rows="8" />
      <el-row slot="footer" class="dialog-footer" type="flex" justify="center">
        <el-button @click="btnCancel">不通过</el-button>
        <el-button type="primary" @click="btnOk">通过</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import couponPopup from './conponents/couponPopup.vue'
export default {
  components: {
    couponPopup
  },
  data() {
    return {
      currentPage4: 1,
      tableData: [{
        type: '现货交易',
        shop_name: '犯困嫌疑人',
        order_number: '124586',
        remarks: '1',
        refund_rate: '2%',
        amount: '29.6万',
        time: '2021-2-27'

      }],
      showPopup: false,
      showConfirmOrder: false,
      exhibition: true,
      ishideBox: false

    }
  },
  methods: {
    btnOk() {
      this.showConfirmOrder = false
    },
    btnCancel() {
      this.showConfirmOrder = false
      this.ishideBox = false
    }

  }

}
</script>
<style lang="scss" scoped>
.app-container{
  .headMenu{
    margin-bottom: 20px;
  }
  .main {
    .selectionBox {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
    .operationButton{
      height: 100%;
      display: flex;

      .btn{
          display: flex;
          justify-content: center;
          align-items: start;
      }
    }
    .addButton {
      margin-top: 45px;
      margin-bottom: 20px;
    }
    .page_number{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }

 .tips {
   display: flex;
   align-items: center;
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin-top: 20px;
      margin-bottom: 80px;
      font-size: 14px;
      background-color: #E6F7FF;
      border: 1px solid #BAE7FF;
      .el-icon-info{
        margin: 8px;
        color: #078FEA;
      }
      .close {
       margin-left: 280px;
       color: #9D9E9F;
       cursor: pointer;
      }
    }
    .explain{
      margin-bottom: 20px;
    }

     .hideBox{
      opacity: 0;

   }

}
</style>
